<template>
  <el-tabs v-model="activeName" stretch="true" @tab-click="handleClick">
    <el-tab-pane label="申请入驻" name="first">
      <div class="app-container">
        <el-table v-loading="listLoading1" element-loading-text="加载中" :data="list1" border fit highlight-current-row>
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.realName }}
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.applyPhone }}
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="170" align="center">
            <template slot-scope="scope">
              {{ scope.row.applyEmail }}
            </template>
          </el-table-column>
          <el-table-column label="回访时间" width="80" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.visitTime === 0">随时</div>
              <div v-if="scope.row.visitTime === 1">非工作日</div>
            </template>
          </el-table-column>
          <el-table-column label="地址" align="center">
            <template slot-scope="scope">
              {{ scope.row.applyLocation }}
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="170" align="center">
            <template slot-scope="scope">
              <i v-if="scope.row.applyTime" class="el-icon-time" />
              <span> {{ scope.row.applyTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核" width="150" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleAudit(scope.row.id,1)">同意</el-button>
              <el-button size="mini" type="danger" @click="handleAudit(scope.row.id,2)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="currentPage1"
            :page-sizes="[10, 20, 40, 80]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
          />
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="创建社团" name="second">
      <div class="app-container">
        <el-table v-loading="listLoading2" element-loading-text="加载中" :data="list2" border fit highlight-current-row>
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.personalInfoResponse.realName }}
            </template>
          </el-table-column>
          <el-table-column label="指导老师" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.personalInfoResponse.guideTeacher }}
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.personalInfoResponse.userPhone }}
            </template>
          </el-table-column>
          <el-table-column label="社团名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="社团简介" align="center">
            <template slot-scope="scope">
              {{ scope.row.detail }}
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="170" align="center">
            <template slot-scope="scope">
              <i v-if="scope.row.applyTime" class="el-icon-time" />
              <span> {{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核" width="150" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleCreateAudit(scope.row.id,3)">同意</el-button>
              <el-button size="mini" type="danger" @click="handleCreateAudit(scope.row.id,2)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="currentPage2"
            :page-sizes="[10, 20, 40, 80]"
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
          />
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import {
  getApplyList,
  getCreateList,
  setCreateInspect
} from '@/api/team'
import {
  setInspect
} from '@/api/activity'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {

  },
  data() {
    return {
      activeName: 'first',
      list1: null,
      listLoading1: true,
      currentPage1: 1,
      total1: 9,
      pageSize1: 10,
      list2: null,
      listLoading2: true,
      currentPage2: 1,
      total2: 9,
      pageSize2: 10
    }
  },
  created() {
    this.fetchData1()
    this.fetchData2()
  },
  methods: {
    // 获取表格数据
    fetchData1() {
      // debugger
      // console.log('路由模式', process.env.port)
      this.listLoading1 = true
      const val = {
        page: this.currentPage1,
        size: this.pageSize1
      }
      getApplyList(0, val).then((res) => {
        console.log(res.res.content)
        this.list1 = res.res.content
        this.total1 = res.res.totalElements
        this.currentPage1 = res.res.number + 1
        this.pageSize1 = res.res.size
        this.listLoading1 = false
      })
    },
    fetchData2() {
      // debugger
      // console.log('路由模式', process.env.port)
      this.listLoading2 = true
      const val = {
        page: this.currentPage2,
        size: this.pageSize2
      }
      getCreateList(val).then((res) => {
        console.log(res.res.content)
        this.list2 = res.res.content
        this.total2 = res.res.totalElements
        this.currentPage2 = res.res.number + 1
        this.pageSize2 = res.res.size
        this.listLoading2 = false
      })
    },
    // 审核入驻
    handleAudit(id, result) {
      const val = {
        applyInfoId: id,
        result: result
      }
      setInspect(val)
        .then((res) => {
          console.log(res)
          this.$message.success('操作成功')
          this.fetchData1()
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
    },
    // 审批创建社团
    handleCreateAudit(id, result) {
      const val = {
        organizationId: id,
        result: result
      }
      setCreateInspect(val)
        .then((res) => {
          console.log(res)
          this.$message.success('操作成功')
          this.fetchData2()
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
    },

    // 分页
    handleSizeChange1(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize1 = val
      this.fetchData1()
    },
    handleCurrentChange1(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage1 = val
      this.fetchData1()
    },
    handleSizeChange2(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize2 = val
      this.fetchData2()
    },
    handleCurrentChange2(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage2 = val
      this.fetchData2()
    }
  }
}
</script>
